<template>
	<n-timeline class="my-chart-configurations-timeline">
		<n-timeline-item v-show="request.requestDataType != 0 && !MyBasicTable" color="#97846c" title="数据过滤">
			<n-space :size="18" vertical>
				<n-text depth="3">过滤器默认处理接口返回值的「data」字段</n-text>
				<chart-data-monaco-editor></chart-data-monaco-editor>
			</n-space>
		</n-timeline-item>
		<n-timeline-item title="数据内容">
			<n-space vertical>
				<n-space class="source-btn-box">
					<n-upload
						:show-file-list="false"
						:customRequest="customRequest"
						@before-upload="beforeUpload"
						v-if="request.requestDataType == 0"
					>
						<n-space>
							<n-button class="sourceBtn-item">
								<template #icon>
									<my-icon icon="DocumentAdd" />
								</template>
								导入(json / txt)
							</n-button>
						</n-space>
					</n-upload>
					<n-button class="sourceBtn-item" @click="download">
						<template #icon>
							<my-icon icon="DocumentDownload" />
						</template>
						下载
					</n-button>
				</n-space>
				<n-card size="small">
					<n-code :code="toString(data.data)" language="json"></n-code>
				</n-card>
			</n-space>
		</n-timeline-item>
	</n-timeline>
</template>

<script setup>
import ChartDataMonacoEditor from '../ChartDataMonacoEditor/index.vue';
import { toString } from '@/utils';

const props = defineProps({
	request: {
		type: Object
	},
	MyBasicTable: {
		type: Boolean,
		default: false
	}
});

const request = props.request || $store.chart.getTargetData.orgConfig.request;

// json,txt上传，下载
import { useFile } from './hooks/useFile.hooks';
const data = props.request || $store.chart.getTargetData.orgConfig.config;
const { beforeUpload, customRequest, download } = useFile(data);
</script>

<style lang="scss" scoped>
@include b('chart-configurations-timeline') {
	margin-top: 10px;
	:deep(pre) {
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	.source-btn-box {
		margin-top: 10px !important;
	}
}
</style>
